<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="{{ url_for('static', filename='echarts.min.js') }}"></script>
    <script src="echarts.min.js"></script>
    <script src="echarts.common.min.js"></script>

	 <style>
        #pic1{
             width:400px;
             height:400px;
            margin: 20px auto;
        }
        .container{
            display: flex;
            justify-content: space-evenly;
            align-items: center;
            width: 100%;
            height: 100%;
            flex-direction: column;
            }
            #main{
                width: 50%;
            }
            #pic1{
                 width: 50%;
            }
            #pic2{
               width: 50%;
            }
    </style>
</head>

<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div class="container">
    <div id="main" style="height:600px;"></div>
	<div id="pic1"></div>
	<div id="pic2" style="height:600px;"></div>
    </div>
    <script type="text/javascript">
     <!--第一个柱状图代码-->
var myChart1 = echarts.init(

        document.getElementById('main'));option1 = {
        title:{        x:'center',
        text:'2018通话总时长',
        subtext:'最多的三个省和三个最少的省',
        textStyle:{
        color:'red',}},
         toolbox: {
        show: true,
        feature: {
            saveAsImage: {}
        }
    },
        xAxis: {
        type: 'category',
        data: [{% for i in total_A %}"{{i}}",{% endfor %}]
    },
    yAxis: {
        type: 'value'
    },
        tooltip : {
        trigger: 'item',
        axisPointer : {
            type : 'shadow'
        },

    },
    series: [{
        data: [{% for i in total_B %}{{i}},{% endfor %}],
        type: 'bar'
    }]
        };
        myChart1.setOption(option1);

    </script>
	<script>
     <!--第二个饼状图代码-->
 var myChart2 = echarts.init(
        document.getElementById('pic1'));
       option2 = {
    title : {
        text: '2018通话总时长',
        subtext: '最多的三个省和三个最少的省',
        x:'center'
    },
      toolbox: {
        show: true,
        feature: {
            saveAsImage: {}
        },
    },
    tooltip : {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
    legend: {
        orient: 'vertical',
        left: 'left',
        data: [{% for i in total_A %}"{{i}}",{% endfor %}]
    },
    series : [
        {
            name: '通话时长',
            type: 'pie',
            radius : '75%',
            center: ['50%', '60%'],
            data:[{% for i in total_C %}{value:{{i[0]}},name:"{{i[1]}}"},{% endfor %}],
            itemStyle: {
                emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
};

        myChart2.setOption(option2);
    </script>
    <script>
     <!--第三个线型图代码-->
 var myChart3 = echarts.init(
        document.getElementById('pic2'));
        option3 = {

        title:{text:'各个小时的通话总次数',
        subtext:'2017年7月',
        textStyle:{color:'red',},
        x:'center',},

        xAxis:{
        type:'category',
        data:[{% for i in time_A %}"{{i}}"+"H",{%  endfor%}]
        },
        yAxis:{
        type:'value'
        },
            tooltip: {
        trigger: 'axis'
    },
    toolbox: {
        show: true,
        feature: {
          saveAsImage: {}
        }
    },
        series:[{
        type:'line',
        data:[{% for i in count_A %}{{i}},{% endfor %}]}]
        };
        myChart3.setOption(option3);
    </script>
</body>
</html>